8078
8336
Les réponses à cette question sont un effort communautaire. Modifiez les réponses existantes pour améliorer ce message. Il n'accepte pas actuellement de nouvelles réponses ou interactions.
Comment puis-je rediriger l'utilisateur d'une page à une autre en utilisant jQuery ou du JavaScript pur? 
1
2
Prochain
On ne redirige pas simplement en utilisant jQuery
jQuery n'est pas nécessaire et window.location.replace (...) simulera au mieux une redirection HTTP.
window.location.replace (...) est mieux que d'utiliser window.location.href, car replace () ne garde pas la page d'origine dans l'historique de session, ce qui signifie que l'utilisateur ne restera pas coincé dans un retour sans fin - bouton fiasco.
Si vous souhaitez simuler un clic sur un lien, utilisez
location.href
Si vous souhaitez simuler une redirection HTTP, utilisez location.replace
Par exemple:
// comportement similaire à une redirection HTTP
window.location.replace ("http://stackoverflow.com");
// comportement similaire au clic sur un lien
window.location.href = "http://stackoverflow.com";
|
AVERTISSEMENT: Cette réponse a simplement été fournie comme une solution possible; ce n'est évidemment pas la meilleure solution, car elle nécessite jQuery. Préférez plutôt la solution JavaScript pure.
$ (emplacement) .attr ('href', 'http://stackoverflow.com')
|
Méthode JavaScript standard "vanille" pour rediriger une page
window.location.href = 'nouvellePage.html';
Ou plus simplement: (puisque la fenêtre est globale)
location.href = 'nouvellePage.html';
Si vous êtes ici parce que vous perdez HTTP_REFERER lors de la redirection, continuez à lire:
(Sinon, ignorez cette dernière partie)
La section suivante est destinée à ceux qui utilisent HTTP_REFERER comme l'une des nombreuses mesures de sécurité (bien que ce ne soit pas une excellente mesure de protection). Si vous utilisez Internet Explorer 8 ou une version antérieure, ces variables sont perdues lors de l'utilisation de toute forme de redirection de page JavaScript (location.href, etc.).
Ci-dessous, nous allons implémenter une alternative pour IE8 et inférieur afin de ne pas perdre HTTP_REFERER. Sinon, vous pouvez presque toujours utiliser simplement window.location.href.
Les tests sur HTTP_REFERER (collage d'URL, session, etc.) peuvent aider à déterminer si une requête est légitime.
(Remarque: il existe également des moyens de contourner / usurper ces référents, comme indiqué par le lien de droop dans les commentaires)
Solution de test simple pour tous les navigateurs (retour à window.location.href pour Internet Explorer 9+ et tous les autres navigateurs)
Utilisation: redirect ('anotherpage.aspx');
redirection de fonction (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
version = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 et inférieur
if (isIE && version <9) {
var lien = document.createElement ('a');
link.href = url;
document.body.appendChild (lien);
link.click ();
}
// Tous les autres navigateurs peuvent utiliser le standard window.location.href (ils ne perdent pas HTTP_REFERER comme Internet Explorer 8 et les versions antérieures)
autre {
window.location.href = url;
}
}
|
Il existe de nombreuses façons de procéder.
// window.location
window.location.replace ('http://www.example.com')
window.location.assign ("http://www.example.com")
window.location.href = 'http://www.example.com'
document.location.href = '/ chemin'
// window.history
window.history.back ()
window.history.go (-1)
// window.navigate; UNIQUEMENT pour les anciennes versions d'Internet Explorer
window.navigate ('top.jsp')
// Probablement pas de bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (emplacement) .attr ('href', 'http: //www.example.com')
$ (fenêtre) .attr ('emplacement', 'http: //www.example.com')
$ (emplacement) .prop ('href', 'http://www.example.com')
|
Cela fonctionne pour tous les navigateurs:
window.location.href = 'votre_url';
|
Il serait utile que vous soyez un peu plus descriptif dans ce que vous essayez de faire. Si vous essayez de générer des données paginées, il existe certaines options pour procéder. Vous pouvez générer des liens séparés pour chaque page à laquelle vous souhaitez pouvoir accéder directement.
 1 
 2 
 3 
...
Notez que la page actuelle de l'exemple est gérée différemment dans le code et avec CSS.
Si vous voulez que les données paginées soient modifiées via AJAX, c'est là que jQuery entre en jeu. Ce que vous feriez, c'est ajouter un gestionnaire de clics à chacune des balises d'ancrage correspondant à une page différente. Ce gestionnaire de clics invoquerait du code jQuery qui va chercher la page suivante via AJAX et met à jour la table avec les nouvelles données. L'exemple ci-dessous suppose que vous disposez d'un service Web qui renvoie les nouvelles données de page.
$ (document) .ready (fonction () {
$ ('a.pager-link'). click (function () {
var page = $ (this) .attr ('href'). split (/ \? /) [1];
$ .ajax ({
tapez: 'POST',
url: '/ chemin vers le service',
données: page,
succès: fonction (contenu) {
$ ('# maTable'). html (contenu); // remplacer
}
});
retourner faux; // pour arrêter le lien
});
});
|
Je pense aussi que location.replace (URL) est le meilleur moyen, mais si vous souhaitez informer les moteurs de recherche de votre redirection (ils n'analysent pas le code JavaScript pour voir la redirection), vous devez ajouter la méta rel = "canonical" taguer sur votre site Web.
L'ajout d'une section noscript avec une balise meta d'actualisation HTML est également une bonne solution. Je vous suggère d'utiliser cet outil de redirection JavaScript pourcréer des redirections. Il prend également en charge Internet Explorer pour transmettre le référent HTTP.
Un exemple de code sans délai ressemble à ceci:







  



|
Mais si quelqu'un veut rediriger vers la page d'accueil, il peut utiliser l'extrait suivant.
window.location = window.location.host
Il serait utile que vous disposiez de trois environnements différents: développement, préparation et production.
Vous pouvez explorer cet objet window ou window.location en mettant simplement ces mots dans la console Chrome ou la console Firebug.
|
JavaScript vous fournit de nombreuses méthodes pour récupérer et modifier l'URL actuelle qui est affichée dans la barre d'adresse du navigateur. Toutes ces méthodes utilisent l'objet Location, qui est une propriété de l'objet Window. Vous pouvez créer un nouvel objet Location ayant l'URL actuelle comme suit.
var currentLocation = window.location;
Structure de base d'une URL
// :/ 
Protocole - Spécifie le nom du protocole à utiliser pour accéder à la ressource sur Internet. (HTTP (sans SSL) ou HTTPS (avec SSL))
hostname - Le nom d'hôte spécifie l'hôte propriétaire de la ressource. Par exemple, www.stackoverflow.com. Un serveur fournit des services en utilisant le nom de l'hôte.
port - Un numéro de port utilisé pour reconnaître un processus spécifique auquel un message Internet ou autre réseau doit être transféré lorsqu'il arrive sur un serveur.
chemin - Le chemin donne des informations sur la ressource spécifique de l'hôte à laquelle le client Web veut accéder. Par exemple, stackoverflow.com/index.html.
query - Une chaîne de requête suit le composant path et fournit une chaîne d'informations que la ressource peut utiliser dans un certain but (par exemple, comme paramètres pour une recherche ou comme données à traiter).
hash - La partie d'ancrage d'une URL, inclut le signe de hachage (#).
Avec ces propriétés d'objet Location, vous pouvez accéder à tous ces composants URL
hash: définit ou renvoie la partie d'ancrage d'une URL.
hôte -Sets
ou renvoie le nom d'hôte et le port d'une URL.
nom d'hôte -Sets ou
renvoie le nom d'hôte d'une URL.
href -Définit ou renvoie la totalité
URL.
chemin d'accès -Définit ou renvoie le nom de chemin d'une URL.
port: définit ou renvoie le numéro de port utilisé par le serveur pour une URL.
protocol: définit ou renvoie le protocole d'une URL.
recherche -Sets
ou renvoie la partie requête d'une URL
Maintenant, si vous souhaitez modifier une page ou rediriger l'utilisateur vers une autre page, vous pouvez utiliser la propriété href de l'objet Location comme ceci
Vous pouvez utiliser la propriété href de l'objet Location.
window.location.href = "http://www.stackoverflow.com";
Location Object a également ces trois méthodes
assign () - Charge un nouveau document.
reload () - Recharge le document actuel.
replace () - Remplace le document actuel par un nouveau
Vous pouvez utiliser les méthodes assign () et replace également pour rediriger vers d'autres pages comme celles-ci
location.assign ("http://www.stackoverflow.com");
location.replace ("http://www.stackoverflow.com");
Différence entre assign () et replace () - La différence entre la méthode replace () et la méthode assign () () est que replace () supprime l'URL du document actuel de l'historique du document, ce qui signifie qu'il n'est pas possible le bouton "retour" pour revenir au document original. Utilisez donc la méthode assign () si vous souhaitez charger un nouveau document et que vous souhaitez donner la possibilité de revenir au document d'origine.
Vous pouvez modifier la propriété href de l'objet de localisation en utilisant jQuery également comme ceci
$ (emplacement) .attr ('href', url);
Et par conséquent, vous pouvez rediriger l'utilisateur vers une autre URL.
|
Fondamentalement, jQuery n'est qu'un framework JavaScript et pour faire certaines choses comme la redirection dans ce cas, vous pouvez simplement utiliser du JavaScript pur, donc dans ce cas, vous avez 3 options en utilisant vanillaJavaScript:
1) En utilisant le remplacement de l'emplacement, cela remplacera l'historique actuel de la page, ce qui signifie qu'il n'est pas possible d'utiliser le bouton retour pour revenir à la page d'origine.
window.location.replace ("http://stackoverflow.com");
2) En utilisant l'attribution d'emplacement, cela conservera l'historique pour vous et en utilisant le bouton Retour, vous pouvez revenir à la page d'origine:
window.location.assign ("http://stackoverflow.com");
3) Je recommande d'utiliser l'une de ces méthodes précédentes, mais cela pourrait être la troisième option en utilisant du JavaScript pur:
window.location.href = "http://stackoverflow.com";
Vous pouvez également écrire une fonction dans jQuery pour le gérer, mais ce n'est pas recommandé car il ne s'agit que d'une fonction JavaScript pure d'une seule ligne, vous pouvez également utiliser toutes les fonctions ci-dessus sans fenêtre si vous êtes déjà dans la portée de la fenêtre, par exemple window.location.replace ("http://stackoverflow.com"); pourrait être location.replace ("http://stackoverflow.com");
Aussi je les montre tous sur l'image ci-dessous:
|
Devrait juste pouvoir définir en utilisant window.location.
Exemple:
window.location = "https://stackoverflow.com/";
Voici un post précédent sur le sujet: Comment puis-je rediriger vers une autre page Web?
|
Avant de commencer, jQuery est une bibliothèque JavaScript utilisée pour la manipulation DOM. Vous ne devriez donc pas utiliser jQuery pour une redirection de page.
Une citation de Jquery.com:
Bien que jQuery puisse fonctionner sans problèmes majeurs dans les anciennes versions de navigateur,
nous ne testons pas activement jQuery dedans et ne corrigeons généralement pas les bogues
qui peuvent apparaître en eux.
Il a été trouvé ici:
https://jquery.com/browser-support/
Ainsi, jQuery n'est pas une solution ultime pour la compatibilité descendante.
La solution suivante utilisant du JavaScript brut fonctionne dans tous les navigateurs et est standard depuis longtemps, vous n'avez donc pas besoin de bibliothèques pour la prise en charge de plusieurs navigateurs.
Cette page sera redirigée vers Google après 3000 millisecondes



 exemple 


Vous serez bientôt redirigé vers google.

Les différentes options sont les suivantes: window.location.href = "url"; // Simule la navigation normale vers une nouvelle page window.location.replace ("url"); // Supprime l'URL actuelle de l'historique et la remplace par une nouvelle URL window.location.assign ("url"); // Ajoute une nouvelle URL à la pile d'historique et redirige vers la nouvelle URL window.history.back (); // Simule un clic sur le bouton retour window.history.go (-1); // Simule un clic sur le bouton retour window.history.back (-1); // Simule un clic sur le bouton retour window.navigate ("page.html"); // Identique à window.location = "url" Lors de l'utilisation de remplacer, le bouton de retour ne retournera pas à la page de redirection, comme s'il n'avait jamais été dans l'historique. Si vous souhaitez que l'utilisateur puisse revenir à la page de redirection, utilisez window.location.href ou window.location.assign. Si vous utilisez une option qui permet à l'utilisateur de revenir à la page de redirection, n'oubliez pas que lorsque vous entrez dans la page de redirection, elle vous redirigera. Alors, tenez-en compte lorsque vous choisissez une option pour votre redirection. Dans des conditions où la page ne redirige que lorsqu'une action est effectuée par l'utilisateur, avoir la page dans l'historique du bouton de retour sera acceptable. Mais si la page est automatiquement redirigée, vous devez utiliser replace afin que l'utilisateur puisse utiliser le bouton Précédent sans être forcé de revenir à la page que la redirection envoie. Vous pouvez également utiliser des métadonnées pour exécuter une redirection de page comme suit. Actualisation META Emplacement META Détournement de base De nombreuses autres méthodes pour rediriger votre client sans méfiance vers une page qu'il ne souhaite peut-être pas consulter peuvent être trouvées sur cette page (aucune d'entre elles ne dépend de jQuery): https://code.google.com/p/html5security/wiki/RedirectionMethods Je tiens également à souligner que les gens n'aiment pas être redirigés au hasard. Ne redirigez les gens que lorsque cela est absolument nécessaire. Si vous commencez à rediriger les gens au hasard, ils n'iront plus jamais sur votre site. Le paragraphe suivant est hypothétique: Vous pouvez également être signalé comme un site malveillant. Si cela se produit, lorsque les gens cliquent sur un lien vers votre site, le navigateur des utilisateurs peut les avertir que votre site est malveillant. Ce qui peut également arriver, c'est que les moteurs de recherche peuvent commencer à baisser votre note si les gens signalent une mauvaise expérience sur votre site. Veuillez consulter les consignes Google aux webmasters concernant les redirections: https://support.google.com/webmasters/answer/2721217?hl=fr&ref_topic=6001971 Voici une petite page amusante qui vous fait sortir de la page. Partez

Partez

Si vous combinez les deux exemples de pages ensemble, vous auriez une boucle infantile de réacheminementgarantira que votre utilisateur ne voudra plus jamais utiliser votre site. | var url = 'asdf.html'; window.location.href = url; | Vous pouvez le faire sans jQuery comme: window.location = "http://votredomaine.com"; Et si vous ne voulez que jQuery, vous pouvez le faire comme: $ jq (fenêtre) .attr ("emplacement", "http://votredomaine.com"); | Cela fonctionne avec jQuery: $ (fenêtre) .attr ("emplacement", "http://google.fr"); | # Redirection de page HTML à l'aide de la méthode jQuery / JavaScript Essayez cet exemple de code: fonction YourJavaScriptFunction () { var i = $ ('# connexion'). val (); if (i == 'connexion') window.location = "Login.php"; autre window.location = "Déconnexion.php"; } Si vous voulez donner une URL complète comme window.location = "www.google.co.in" ;. | Question originale: "Comment rediriger en utilisant jQuery?", D'où la réponse implémente jQuery >> Cas d'utilisation complémentaire. Pour simplement rediriger vers une page avec JavaScript: window.location.href = "/ contact /"; Ou si vous avez besoin d'un délai: setTimeout (fonction () { window.location.href = "/ contact /"; }, 2000); // Temps en millisecondes jQuery vous permet de sélectionner facilement des éléments d'une page Web. Vous pouvez trouver tout ce que vous voulez sur une page, puis utiliser jQuery pour ajouter des effets spéciaux, réagir aux actions de l'utilisateur ou afficher et masquer le contenu à l'intérieur ou à l'extérieur de l'élément que vous avez sélectionné. Toutes ces tâches commencent par savoir sélectionner un élément ou un événement. $ ('a, img'). on ('click', function (e) { e.preventDefault (); $ (this) .animate ({ opacity: 0 // Mettez une animation CSS ici }, 500); setTimeout (fonction () { // OK, fini le personnel de jQuery, allons rediriger window.location.href = "/ contact /"; }, 500); }); Imaginez que quelqu'un a écrit un script / plugin avec 10000 lignes de code. Avec jQuery, vous pouvez vous connecter à ce code avec juste une ligne ou deux. | Vous devez mettre cette ligne dans votre code: $ (emplacement) .attr ("href", "http://stackoverflow.com"); Si vous n'avez pas jQuery, utilisez JavaScript: window.location.replace ("http://stackoverflow.com"); window.location.href ("http://stackoverflow.com"); | Alors, la question est de savoir comment créer une page de redirection, et non comment rediriger vers un site Web? Il vous suffit d'utiliser JavaScript pour cela. Voici un petit code qui créera une page de redirection dynamique. Donc, disons que vous venez de mettre cet extrait de code dans un fichier de redirection / index.html sur votre site Web, vous pouvez l'utiliser comme tel. http://www.mywebsite.com/redirect?url=http://stackoverflow.com Et si vous accédez à ce lien, il vous redirigera automatiquement vers stackoverflow.com. Lien vers la documentation Et c'est ainsi que vous créez une page de redirection simple avec JavaScript Éditer: Il y a aussi une chose à noter. J'ai ajouté window.location.replace dans mon code car je pense que cela convient à une page de redirection, mais, vous devez savoir que lorsque vous utilisez window.location.replace et que vous êtes redirigé, lorsque vous appuyez sur le bouton retour de votre navigateur, cela ne sera pas est revenu à la page de redirection, et il reviendra à la page précédente, jetez un œil à cette petite chose de démonstration. Exemple: Le processus: store home => rediriger la page vers google => google Quand à google: google => bouton retour dans le navigateur => magasin à la maison Donc, si cela répond à vos besoins, tout devrait bien se passer. Si vous souhaitez inclure la page de redirection dans l'historique du navigateur, remplacez-la if (url) window.location.replace (url); avec if (url) window.location.href = url; | Sur votre fonction clic, ajoutez simplement: window.location.href = "L'URL vers laquelle vous souhaitez rediriger"; $ ('# id'). click (function () { window.location.href = "http://www.google.com"; }); | Essaye ça: location.assign ("http://www.google.com"); Extrait de code de l'exemple. | jQuery n'est pas nécessaire. Tu peux le faire: window.open ("URL", "_ self", "", "") C'est aussi simple que ça! La meilleure façon de lancer une requête HTTP est avec document.loacation.href.replace ('URL'). | Écrivez d'abord correctement. Vous souhaitez naviguer dans une application pour un autre lien de votre application pour un autre lien. Voici le code: window.location.href = "http://www.google.com"; Et si vous souhaitez parcourir les pages de votre application, j'ai également du code, si vous le souhaitez. | Vous pouvez rediriger dans jQuery comme ceci: $ (emplacement) .attr ('href', 'http://yourPage.com/'); | Utilisation de JavaScript: Méthode 1: window.location.href = "http://google.com"; Méthode 2: window.location.replace ("http://google.com"); Utilisation de jQuery: Méthode 1: $ (emplacement) $ (emplacement) .attr ('href', 'http://google.com'); Méthode 2: fonction réutilisable jQuery.fn.redirectTo = fonction (url) { window.location.href = url; } jQuery (fenêtre) .redirectTo ("http://google.com"); | En JavaScript et jQuery, nous pouvons utiliser le code suivant pour rediriger une page vers une autre page: window.location.href = "http://google.com"; window.location.replace ("page1.html"); | ECMAScript 6 + jQuery, 85 octets $ ({jQueryCode: (url) => location.replace (url)}). attr ("jQueryCode") ("http://example.com") Veuillez ne pas tuermoi, c'est une blague. C'est une blague. C'est une blague. Cela "a fourni une réponse à la question", dans le sens où il a demandé une solution "utilisant jQuery" qui dans ce cas implique de le forcer dans l'équation d'une manière ou d'une autre. Ferrybig a apparemment besoin d'expliquer la blague (toujours en plaisantant, je suis sûr qu'il y a des options limitées sur le formulaire d'examen), donc sans plus tarder: D'autres réponses utilisent l'attr () de jQuery sur l'emplacement ou les objets de fenêtre inutilement. Cette réponse en abuse également, mais d'une manière plus ridicule. Au lieu de l'utiliser pour définir l'emplacement, cela utilise attr () pour récupérer une fonction qui définit l'emplacement. La fonction s'appelle jQueryCode même s'il n'y a rien de jQuery à ce sujet, et appeler une fonction somethingCode est tout simplement horrible, surtout quand le quelque chose n'est même pas un langage. Le "85 octets" est une référence à Code Golf. Le golf n'est évidemment pas quelque chose que vous devriez faire en dehors du golf codé, et en outre, cette réponse n'est clairement pas réellement golfée. En gros, grincer des dents. | Javascript: window.location.href = 'www.your_url.com'; window.top.location.href = 'www.your_url.com'; window.location.replace ('www.your_url.com'); Jquery: var url = 'www.votre_url.com'; $ (emplacement) .attr ('href', url); $ (location) .prop ('href', url); // au lieu de location, vous pouvez utiliser window | Voici une redirection temporisée. Vous pouvez régler le temps de retard sur ce que vous voulez: Titre de votre document
Vous serez redirigé dans 8 secondes!
| Il y a trois façons principales de le faire, window.location.href = 'blaah.com'; window.location.assign ('blaah.com'); et... window.location.replace ('blaah.com'); Le dernier est le meilleur, pour une redirection traditionnelle, car il ne sauvegardera pas la page sur laquelle vous êtes allé avant d'être redirigé dans votre historique de recherche. Cependant, si vous souhaitez simplement ouvrir un onglet avec JavaScript, vous pouvez utiliser l'un des éléments ci-dessus. EDIT: Le préfixe de la fenêtre est facultatif. | 1 2 Prochain Ce n'est pas la réponse que vous recherchez? Parcourez les autres questions marquées javascript jquery redirect ou posez votre propre question.